<template>
	<view class="container">
		<view class="beforeview" v-show="showBeforeorNext=='firststep'">
			<text class="yztext">请验证手机号码{{phoneonpage}}</text>
			<view class="input_view">
				<input type="text" value="" placeholder="输入短信验证码" v-model="code"/>
				<text class="getcode" v-if="allowGetcode" @tap="$u.throttle(getCode,500)">发送验证码</text>
				<text class="awaittimes" v-else>{{awaittimesText}}</text>
			</view>
			<view class="next-btn" @tap="getNextstep()">
				<text>下一步</text>
			</view>
		</view>
		<view class="nextview" v-show="showBeforeorNext=='secondstep'">
			<text class="setpassText">请设置6位数支付密码</text>
			<view class="pass_view">
				<u-message-input mode="box" :dot-fill="true" :maxlength="6" @finish="toThirdstep"></u-message-input>
			</view>
		</view>
		<view class="nextview" v-show="showBeforeorNext=='thirdstep'">
			<text class="setpassText">请重复输入6位数支付密码</text>
			<view class="pass_view">
				<u-message-input mode="box" :dot-fill="true" :maxlength="6" @finish="requestSetpaypass"></u-message-input>
			</view>
		</view>
	</view>
</template>

<script>
	import {sendCode,updatePaypass} from '@/apis/request.js'
	export default {
		data() {
			return {
				showBeforeorNext:'firststep',
				userphone:'',
				phoneonpage:'',
			    allowGetcode:true,
				sendcode:'',
				code:'',
				usertoken:'',
				awaittimesText:'',
				showSetpassModal:false,
				firstpass:''
			}
		},
		created() {
			this.userphone=uni.getStorageSync('userInfo').phone;
			const hidenum=uni.getStorageSync('userInfo').phone.substr(3,4);
			this.phoneonpage=uni.getStorageSync('userInfo').phone.replace(hidenum,'****');
			this.usertoken=uni.getStorageSync('userInfo').token;
		},
		methods: {
			getNextstep(){
				if(this.sendcode==''){
					uni.showToast({
						icon:'none',
						title:'请先发送验证码'
					});
					return ;
				}
				if(this.code==''){
					uni.showToast({
						icon:'none',
						title:'输入验证码'
					});
					return;
				}
				if(this.sendcode != this.code){
					uni.showToast({
						icon:'none',
						title:'验证码输入不一致'
					});
					return ;
				}
				this.showBeforeorNext='secondstep';
			},
			toThirdstep(value){
				this.firstpass=value;
				this.showBeforeorNext='thirdstep';
			},
			requestSetpaypass(value){
				this.$http({
					url:updatePaypass,
					method:"POST",
					data:{
						code:this.code,
						password1:this.firstpass,
						password2:value,
						phone:this.userphone
					},
					header:{
						'content-type':'application/x-www-form-urlencoded',
						'Token':this.usertoken
					}
				})
				.then(res=>{
					console.log(res);
					if(res[1].data.status=='200'){
						uni.navigateBack({
							delta:1
						});
					}
				})
				.catch(err=>{
					console.log(err);
				});
			},
			getCode(){
				uni.showLoading({
					title:'发送中'
				});
				this.$http({
					url:sendCode,
					method:"GET",
					data:{
						phone:this.userphone
					},
					header:{
						'Token':this.usertoken,
						'content-type':'application/x-www-form-urlencoded'
					}
				})
				.then(res=>{
					console.log(res);
					if(res[1].data.status=='200'){
						uni.hideLoading();
						this.sendcode=res[1].data.data;
						this.allowGetcode=false;
						let seconds=60;
						this.awaittimesText=`等待${seconds}s`;
						let timer=setInterval(()=>{
							--seconds;
							this.awaittimesText=`等待${seconds}s`;
						},1000);
						setTimeout(()=>{
							this.allowGetcode=true;
						    clearInterval(timer);
						},60000);
					}
				})
				.catch(err=>{
					console.log(err);
				});
			}
		}
	}
</script>

<style lang="scss">
    page{
		width: 100%;
		height: 100%;
	}
	.container{
		width: 100%;
		height: 100%;
		background-color: #F4F8FB;
		.beforeview{
			width: 100%;
			height: auto;
			position: relative;
			top: 20rpx;
			padding-top: 20rpx;
			.yztext{color: #888888;font-size: 28rpx;display:block;width: 680rpx;margin: auto;}
		}
		.input_view{
			width: 100%;
			height: 110rpx;
			background-color:  #FFFFFF;
			margin-top: 20rpx;
			display: flex; 
			align-items: center;
			input{margin-left: 35rpx;width: 515rpx;border-right: 1rpx solid #E3E3E3;}
			text{display: inline-flex;flex: 1;justify-content: center;font-size: 28rpx;}
			.getcode{
				color: #0EAE64;
			}
			.awaittimes{
				color: #888;
			}
		}
		.next-btn{
		   color: #FFFFFF;
		   width: 680rpx;
		   height: 80rpx;
		   background-color: #0EAE64;
		   border-radius: 10rpx;
		   display: flex;
		   align-items: center;
		   justify-content: center;
		   font-size: 28rpx;
		   margin: auto;
		   margin-top: 120rpx;
		}
		.nextview{
			 width:100%;
			 text-align: center;
			 padding-top: 50rpx;
			 height: auto;
			.setpassText{
				color: #222;
				font-size: 30rpx;
			}
			.pass_view{
				width: 100%;
				height: auto;
				margin-top: 50rpx;
			}
		}
	}
</style>
